<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子模型</title>
		<!--内部样式 写在head标签的里面  用style标签表示样式-->
		<style>
			p,div{
				
				/*设置字体*/
				font-family: "微软雅黑";
				font-size: 14px;
				
				/*背景色*/
				background-color: #fd6440;
				
				/*前景色*/
				color: white;
				
				width: 400px;
				height: 200px;
				
				/*左内边距*/
				padding-left: 20px;
				/*padding-top: 20px;*/
				
				/*css给标签都会加上1些默认的外边距和内边距*/
				margin-top:  40px;
				margin-bottom: 20px;
				margin-left: 20px;
				
				/*设置边框*/
				border: 1px solid black;
				
				
			}
			
			body{
				
				/*上下左右的内边距都为0 默认的margin:8px*/
				padding:0px;
				margin: 0px;
				background-color: #F8F8F8;
			}
			
			span{
				background-color: greenyellow;
				border: 1px solid red;
				
				/*内边距*/
				padding: 5px;
				
				/*外边距*/
				margin-left: 20px;
			}
			
			.abc{
				background-color: white;
				/*强制去掉边框*/
				border: none;
				padding-left: 0px;
				
			}
			
		</style>
	</head>
	<body>
		<p>空间首页</p>
		<div>块级元素</div>
		
		<span>啦啦啦1</span><span>啦啦啦2</span>
		
	</body>
</html>
